<script setup lang="ts">
  import { ref } from 'vue';
  import { deleteapprivaor, getApprovalCategorType } from '@/api/dataCenter';
  import { Message, TableInstance } from '@arco-design/web-vue';
  import Add from './add/index.vue';
  import Edit from './edit/index.vue';
  defineOptions({
    name: 'fileTypesCenter',
  });
  const proTableRef = ref<TableInstance | null>(null);
  // 表单类型
  const formType = ref([
    {
      name: 'cate_name',
      label: '流程分类名称',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
  ]);

  const visible1 = ref(false);
  const editParam = ref();
  //表格类型
  const tableType = [
    {
      dataIndex: 'cate_id',
      title: '类型ID',
      align: 'center',
    },
    {
      title: '流程类型名称',
      dataIndex: 'cate_name',
    },
    {
      title: '状态',
      dataIndex: 'cate_state',
      slotName: 'status',
      align: 'center',
      options: [
        {
          status: 'success',
          value: 1,
          label: '启用',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },

    {
      title: '备注',
      dataIndex: 'cate_remark',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '编辑',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = {
              id: record.cate_id,
            };
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            deleteapprivaor({
              cate_ids: [record.cate_id],
            }).then(() => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];
  const visible = ref(false);

  async function request(params: any) {
    const res = await getApprovalCategorType(params);
    return {
      data: res.data,
    };
  }
</script>
<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="流程类型"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加流程类型
        </a-button>
      </template>
      <template #options>
        <Add
          v-if="visible"
          v-model:visible="visible"
          @refresh="
            () => {
              $refs?.proTableRef?.setRefresh();
            }
          "
        />
        <Edit
          v-if="visible1"
          v-model:visible="visible1"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
  </div>
</template>

<style scoped lang="less"></style>
